{include file="common/head"/}
<link rel="stylesheet" href="__STATIC__/plugins/layui/css/layui.css">
<link rel="stylesheet" href="__STATIC__/plugins/layui/layui.js">
<style>
   .layui-tab-item{
       width: 100%;
       height: 760px;
       overflow: hidden;

   }
    .bg{
        width: 100%;
        height: 760px;
        z-index: 1;
        background-image:url(__STATIC__/home/images/apaike/bg-login.png);
    }
   .bg-blur {
       float: left;
       width: 100%;
       background-repeat: no-repeat;
       background-position: center;
       background-size: cover;
       -webkit-filter: blur(15px);
       -moz-filter: blur(15px);
       -o-filter: blur(15px);
       -ms-filter: blur(15px);
       filter: blur(15px);
   }

   .content-front {
       position:absolute;
       left: 10px;
       right: 10px;
       /*height:600px;*/
       /*line-height: 600px;*/
       /*text-align: center;*/
   }

    .layui-form{
        width: 352px;
        height: 400px;
        margin: 185px auto;
    }
    .title{
        width: 352px;
        margin: 0 auto;
    }
    .layui-form-item{
        width: 100%;
    }
   .form-item-on{
       margin-top: 70px;
   }
    .form-item-to{
        margin-top: 40px;
    }
    .form-item-tw{
        width: 100%;
        height: 30px;
    }
   .form-item-tw span{
       font-size: 16px;
       color: white;
   }
   .form-item-tw span a{
       font-size: 16px;
       color: white;
   }
    .form-item-si{
        margin-top: 48px;

    }

</style>
<div class="layui-tab-item layui-show">
    <div class="bg bg-blur"></div>
    <div class="layui-form layui-form-pane content-front">
        <form method="post">
            <div class="title">
                <div class="title-on">
                    <span style="font-size: 50px;font-weight: 700;color: white">Apex Account</span>
                </div>
                <div class="title-to">
                    <span style="font-size: 30px;color: white;display: inline-block;text-indent:15px">Manage Apex account</span>
                </div>
            </div>
            <div class="layui-form-item form-item-on">
                <div class="layui-input-inline" style="width:100%">
                    <input style="width: 100%;height: 42px;border-radius: 3px" type="text" id="username" name="username" required lay-verify="required" placeholder="请输入邮箱或者手机号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item form-item-to">
                <div class="layui-input-inline" style="width: 352px">
                    <input style="width: 100%;height: 42px;border-radius: 3px" type="password" id="L_pass" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="form-item-tw">
                <span><input type="radio">Remember Me</span>
                <span style="display: inline-block;float: right"><a href="{:url('forget')}">忘记密码？</a></span>
            </div>
            <div class="layui-form-item form-item-si">
                <button style="float: left;width: 150px;height: 40px;background: white;color: #adadad;border-radius: 3px" type="button" class="layui-btn" lay-filter="sub" lay-submit>立即注册</button>
                <button style="float: right;width: 150px;height: 40px;background: #2b7db6;border-radius:3px " type="button" class="layui-btn" lay-filter="sub" lay-submit>立即登录</button>

            </div>

        </form>
    </div>

</div>
{include file="common/footer"/}
<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form,$ = layui.jquery;
        // 登录提交监听
        form.on('submit(sub)', function (data) {
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post("{:url('home/login/login')}",data.field,function(res){
                layer.close(loading);
                if(res.code > 0){
                    layer.msg(res.msg,{time:1000,icon:1},function(){
                        location.href = "{:url('index/index')}";
                    });
                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                }
            });
        })
    })
</script>